<template>
	<view class="login-container">
		<view class="absolve-wrapper">
			<view class="logo">
				<image src="/static/images/l.png" class="logo-img"></image>
			</view>
			<view class="login-main">
				<view class="input-wrapper shadow-sm">
					<i class="iconfont icon-phone icon"></i>
					<input placeholder="请输入用户名" v-model="userInfo.username" maxlength="11" />
				</view>
				<view class="input-wrapper shadow-sm">
					<i class="iconfont icon-password icon"></i>
					<input v-if="isText" type="text" placeholder="请输入密码" v-model="userInfo.password" />
					<input v-else type="password" placeholder="请输入密码" v-model="userInfo.password" />
					<i class="iconfont eye" :class="isText ? 'icon-openEye' : 'icon-closeEye'"
						@click="isText = !isText"></i>
				</view>
				<view class="input-wrapper shadow-sm">
					<i class="iconfont icon-password icon"></i>
					<input v-if="isText" type="text" placeholder="请再次输入密码" v-model="userInfo.password2" />
					<input v-else type="password" placeholder="请再次输入密码" v-model="userInfo.password2" />
					<i class="iconfont eye" :class="isText ? 'icon-openEye' : 'icon-closeEye'"
						@click="isText = !isText"></i>
				</view>
				<button class="cu-btn round login-button lg cu-load" :class="{ loading: loading }"
					@click="handleRegister">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../api/config.js'
	
	const BASE_API = config.admin_base_api
	
	export default {
		data() {
			return {
				loading: false,
				isText: false,
				userInfo: {
					username: '',
					password: '',
					password2: '',
				}
			};
		},
		methods: {
			async handleRegister() {
				if ((this.userInfo.username === '') || (this.userInfo.password === '')) {
					uni.showToast({
						title: '用户名和密码不能为空!',
						icon: 'none'
					});
					return false;
				};
				if ((this.userInfo.password2 === '')) {
					uni.showToast({
						title: '请再次输入密码!',
						icon: 'none'
					});
					return false;
				};
				if (this.userInfo.password != this.userInfo.password2) {
					uni.showToast({
						title: '两次输入的密码不同!',
						icon: 'none'
					});
					return false;
				};
				const username = this.userInfo.username;
				const password = this.userInfo.password;
				uni.showLoading({
					title: '注册中...',
					mask: false
				});
				uni.request({
					url: BASE_API + '/wx/appUser/register',
					method: 'POST',
					data: {
						editType: 0, //0：新增 1：编辑
						phone: "",
						username,
						password,
					},
					success: res => {
						uni.hideLoading()
						if (res.data.code != 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							return;
						}
						uni.showModal({
							title: '提示',
							content: '注册成功登录',
							showCancel: false,
							cancelText: '关闭',
							confirmText: '好的',
							success: res => {
								uni.navigateTo({
									url: '/pages/login/index',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							},
							fail: () => {},
							complete: () => {}
						});

					},
					fail: () => {},
					complete: () => {}
				});


			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-container {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		// background: url(../../static/loginBg.png) no-repeat;
		// background-size: contain;
		.absolve-wrapper {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.background-img {
			width: 100%;
			height: 100%;
		}

		.logo {
			text-align: center;
			margin-top: 12%;

			.logo-img {
				width: 100px;
				height: 100px;
			}
		}

		.text-title {
			font-size: 48rpx;
			margin-top: 5%;
			text-align: center;
			color: #fffefe;
		}

		.login-main {
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 10%;
			right: 10%;

			.input-wrapper {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgb(242, 242, 242);
				position: relative;

				.icon {
					margin-right: 10px;
					font-size: 16px;
				}

				.eye {
					float: right;
					position: absolute;
					right: 5px;
					font-size: 16px;
				}
			}

			.login-button {
				width: 100%;
				color: #fff;
				background: #409EFF;
				letter-spacing: 2px;
				height: 45px;
				margin-top: 75rpx !important;
			}
		}

		.other-login {
			position: absolute;
			bottom: 5%;
			left: 10%;
			right: 10%;

			.other-text {
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
				position: relative;

				&::before,
				&::after {
					position: absolute;
					background: rgba(0, 0, 0, 0.15);
					content: '';
					height: 1px;
					top: 50%;
					width: 100px;
				}

				&::before {
					left: 5px;
				}

				&::after {
					right: 5px;
				}
			}

			.login-list {
				margin-top: 15px;
				display: flex;
				justify-content: center;
				align-items: center;

				.other-item {
					flex: 1;
					font-size: 40px;
					text-align: center;

					&.icon-weixin {
						color: #17d874;
					}

					&.icon-qq {
						color: #32d6f5;
					}

					&.icon-weibo {
						color: rgb(234, 93, 92);
					}

				}
			}
		}

		/deep/ {
			.input-placeholder {
				color: rgb(194, 194, 194);
				font-size: 30rpx;
			}
		}
	}
</style>